<template>
  <div class="bypass" style="margin-top:90px;">
    <div class="container">
      <div class="row">
       

        <!-- 左边 -->
        <div  class="col-md-9">
           <div class="shadow p-3 bg-body rounded center1">
            <!-- <div class="diylefttop">
              <div class="diylefttop border-bottom">
                更多
              </div>
            </div>-->
            <div class="diymidinsidebottom">
              <div class="col-12">
                <div class="tab-content" id="nav-tabContent">
                  <div class="tab-pane fade show active" id="list-comprehensive" role="tabpanel" aria-labelledby="list-comprehensive-list">
                    <challenges-comprehensive/>
                   
                  </div>
                  <div class="tab-pane fade" id="list-special" role="tabpanel" aria-labelledby="list-special-list">
                   <challenges-special/>
                   
                  </div>
                  <div class="tab-pane fade" id="list-real" role="tabpanel" aria-labelledby="list-real-list">
                    <challenges-real/>
                  </div>
                  <div class="tab-pane fade" id="list-classic" role="tabpanel" aria-labelledby="list-classic-list">
                  <challenges-classic/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
       <!-- 右边 -->
        <div class="col-md-3">
                    <div class="diyrightset shadow p-3 bg-body rounded">
                    <div class="diylefttop">
                        <div class="diylefttop border-bottom">
                        漏洞场景
                        </div>
                    </div>
                    <div class="diymidinsidebottom">
                        <div>
                        <div class="list-group" id="list-tab" role="tablist">
                            <a class="list-group-item list-group-item-action active" id="list-comprehensive-list" data-bs-toggle="list" href="#list-comprehensive" role="tab" aria-controls="llist-comprehensive">综合漏洞场景</a>
                            <a class="list-group-item list-group-item-action" id="list-special-list" data-bs-toggle="list" href="#list-special" role="tab" aria-controls="list-special">专项漏洞</a>
                            <a class="list-group-item list-group-item-action " id="list-real-list" data-bs-toggle="list" href="#list-real" role="tab" aria-controls="list-real">真实环境漏洞</a>
                            <a class="list-group-item list-group-item-action" id="list-classic-list" data-bs-toggle="list" href="#list-classic" role="tab" aria-controls="list-classic">经典漏洞</a>
                        </div>
                        </div>
                        <hr>
                    </div>
                    </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="row">
        <div class="col-md-12 d-flex justify-content-center">
          <small style="font-size:10px">Copyright &copy; 2022 南昌大学软件学院网络空间安全专业实训平台 by 郭祥鑫</small>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ChallengesClassic from '@/components/challenges/challenges_classic'
import ChallengesComprehensive from '@/components/challenges/challenges_comprehensive'
import ChallengesSpecial from '@/components/challenges/challenges_special'
import ChallengesReal from '@/components/challenges/challenges_real'
import Challenges_classic from '../components/challenges/challenges_classic.vue'
import Challenges_real from '../components/challenges/challenges_real.vue'
import Challenges_special from '../components/challenges/challenges_special.vue'
import Challenges_comprehensive from '../components/challenges/challenges_comprehensive.vue'


export default {
    name:"Challenges",
    components: {
      ChallengesClassic,
      ChallengesComprehensive,
      ChallengesSpecial,
      ChallengesReal
    },
    data(){
        return{

        }
    }
}
</script>